<template>
  <div class="container">
    <div class="list-box" v-for="(item) in matchlist">
      <div class="data-time"></div>
      <!--<p class="data-time text-align-center">{{item.title | week}}</p>-->
      <div @click="matchClick(item2.id,0)" class="item-list-box" v-for="(item2,i) in item.game_data">
        <div class="flex-row top-desc">
          <div class="flex-grow-1 top-desc-left">{{item2.big_game_name}} {{item2.phase_name}}</div>
          <div class="flex-grow-1 flex-right top-desc-right">开始时间:{{item2.start_time.substr(5,11)}}</div>
        </div>
        <div class="matchBox flex-grow-0">
          <div class="match_detail flex-row">
            <div class="flex-grow-1 play_box flex-x-center">
              <div>
                <!--<img style="width: 1.08rem;height: 1.08rem" :src="item2.apic" alt="">-->
                <p class="oneLine">{{item2.play_a_name}}</p>
              </div>
            </div>
            <div class="flex-grow-0">
              <div class="matching flex-x-center flex-y-center">
                竞猜中
              </div>
            </div>
            <div class="flex-grow-1 play_box flex-x-center">
              <div>
                <!--<img style="width: 1.08rem;height: 1.08rem" :src="item2.bpic" alt="">-->
                <p class="oneLine">{{item2.play_b_name}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="no_data" v-show="show_no_data">---- 暂无相关比赛信息 ----</div>

  </div>
</template>

<script>
  import {TAI_QIU_CENTER_LIST} from 'src/const/guessAllUri'

  document.title = '直播竞猜';
  export default {
    name: "guessCenter",
    data() {
      return {
        tabList: [],
        topcurrentindex: 0,
        matchlist: [],
        show_no_data: false,
        uid: ''
      }
    },
    watch: {
      matchlist(val) {
        if (val.length > 0 && val) {
          this.show_no_data = false
        } else {
          this.show_no_data = true
        }
      }
    },
    async mounted() {
      this.getCenterList()
      // await this.getToplist();
      // // getuid
      // if (window.android) {
      //   this.uid = window.android.getUid();
      //   // window.localStorage.setItem('jcyy_uid',uid);
      //   await this.getCartCont(this.uid);
      //   // alert(uid)
      // } else {
      //   window['getUserToken'] = (token, u_id) => {
      //     this.getCartCont(u_id);
      //   };
      // }
      // if (isDebug) {
      //   this.uid = window.localStorage.getItem('jcyy_uid');
      //   await this.getCartCont(this.uid);
      // }

    },
    methods: {
      getCenterList() {
        this.$ajax.get(TAI_QIU_CENTER_LIST,{
          id:2
        }).then(res => {
          console.log(res.data);
          this.matchlist = res.data;
        })
      },
      matchClick(id, is_live) {
        let toUrl = window.location.origin + `/guess/guessDetails.html?id=${id}`;
        let webUrl = is_live == 0 ? toUrl : '';
        console.log(webUrl);
        if (window.android) {
          // window.android.jumpTo(toUrl);
          window.android.homeBannerWebClick(id, is_live, webUrl);
        } else {
          window.webkit.messageHandlers.lwdkit.postMessage({
            action: "pushToGuessDetailOrLive",
            data: {
              game_id: id.toString(),
              is_live: is_live,
              webUrl: webUrl
            }
          })
        }
      }

    },
    tabClick(id) {
      this.getCenterList(id)
    }
  }
</script>

<style>
  body {
    background-color: #f0f4f7;
    padding-bottom: 0.1rem;
  }
</style>
<style scoped lang="less">
  .list-box {
    .data-time {
      /*font-size: 14px;*/
      /*color: #454545;*/
      /*margin-top: 0.2rem;*/
      margin-bottom: 0.1rem;
    }

    .item-list-box {
      background: #fff;
      border-radius: 5px;
      width: 90%;
      margin: 0 auto 0.1rem;
      padding-top: 0.1rem;
      padding-bottom: 0.2rem;
      /*margin-bottom: 0.05rem;*/

      .top-desc {
        font-size: 0.24rem;
        padding: 0 0.24rem;

        .top-desc-left {
          color: #6a6a6a;
        }

        .top-desc-right {
          color: #6a6a6a;
        }
      }

      .matchBox {
        padding: 0 0.1rem;
        font-size: 0.24rem;

        .match_detail {
          margin-top: 0.2rem;

          .matching {
            width: 1.20rem;
            height: 0.54rem;
            font-size: .24rem;
            color: #E10019;
            /*margin-top: 0.26rem;*/
            /*border-radius: 3px;*/
            /*border: 1px solid red;*/
            position: relative;
            &:after{
              content: " ";
              position: absolute;
              left: 0;
              top: 0;
              width: 200%;
              height: 1px;
              border: 1px solid red;
              color: red;
              height: 200%;
              transform-origin: left top;
              transform: scale(0.5);
              border-radius: 10px;
            }
          }

          .play_box {
            width: 3rem;
            text-align: center;
          }

          p {
            font-size: 0.28rem;
            margin-top: 0.1rem;
            color: #111111;
          }
        }
      }
    }
  }

</style>